<template>  
    <div>  
      <el-button type="primary" @click="openFileSelector">选择图片</el-button>  
      <input type="file" accept="image/jpg,image/png,image/jpeg" @change="handleFileUpload" style="display: none;">  
    </div>  
  </template>  
    
  <script>  
  import { ref } from 'vue';  
  import axios from 'axios'; // 你需要安装axios或者其他HTTP库  
    
  export default {  
    setup() {  
      const selectedFile = ref(null);  
    
      // 打开文件选择对话框  
      const openFileSelector = () => {  
        const fileInput = document.querySelector('input[type=file]');  
        if (fileInput) {  
          fileInput.click();  
        }  
      };  
    
      // 处理文件选择  
      const handleFileUpload = (event) => {  
        const file = event.target.files[0];  
        if (file) {  
          selectedFile.value = file;  
          // 发送POST请求  
          uploadFile(file);  
        }  
      };  
    
      // 发送文件作为POST请求的请求体  
      const uploadFile = async (file) => {  
        const formData = new FormData();  
        formData.append('file', file); // 'file' 是服务器接收文件的字段名，根据后端接口来调整  
    
        try {  
          const response = await axios.post('/your-upload-endpoint', formData, {  
            headers: {  
              'Content-Type': 'multipart/form-data'  
            }  
          });  
          // 处理响应  
          console.log('上传成功:', response.data);  
        } catch (error) {  
          console.error('上传失败:', error);  
        }  
      };  
    
      return {  
        openFileSelector,  
        handleFileUpload  
      };  
    }  
  };  
  </script>  
    
  <style scoped>  
  /* 样式可以省略或根据你的需求添加 */  
  </style>